<template>
  <v-row>
    <v-col cols="4">
      <v-card>
        <v-card-title>
          店铺信息-{{this.businessId ? '编辑' : '新增'}}
        </v-card-title>
        <v-divider/>
        <v-card-text>
          头像
          <v-avatar @click="toggleShow(true)" size="100" tile>
            <v-img :src="business.image" alt="图片"/>
          </v-avatar>
          <my-upload field="file"
                     @crop-success="cropSuccess"
                     @crop-upload-success="cropUploadSuccess"
                     @crop-upload-fail="cropUploadFail"
                     :modelValue.sync="uploadShow"
                     :width="300"
                     :height="300"
                     url="/api/upload/avatar"
                     :headers="headers"
                     :withCredentials="true"
                     img-format="png"></my-upload>
          <v-form>
            <v-row class="mx-3 my-2">
              <v-col cols="12">
                <v-text-field outlined dense label="店铺名称" :disabled="!isAdd" v-model="business.name"/>
              </v-col>
              <v-col cols="12">
                <v-textarea outlined label="公告" dense v-model="business.announcement"></v-textarea>
              </v-col>
            </v-row>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer/>
          <v-btn color="primary" @click="handleSaveBusiness">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-col>
    <v-col cols="8">
      <v-card>
        <v-card-title>
          绑定的信息
        </v-card-title>
        <v-divider/>
        <v-card-text>
          <v-row>
            <v-col cols="12">
              头像
              <v-avatar :size="100" tile @click="toggleShow(false)">
                <v-img :src="user.avatar"/>
              </v-avatar>
            </v-col>
            <v-col cols="12">
              <v-text-field outlined label="用户名称" dense v-model="user.name"></v-text-field>
            </v-col>
            <v-col cols="12">
              <v-text-field outlined label="手机号(账号)" dense v-model="user.phone"></v-text-field>
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-actions>
          <v-spacer/>
          <v-btn color="primary" @click="handleResetPwd">重置密码</v-btn>
          <v-btn color="primary" @click="handleSaveUser">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>

import 'babel-polyfill'; // es6 shim
import myUpload from 'vue-image-crop-upload';
import {insertOrUpdateBusiness, selectBusinessByIdIncludeUser} from "../../http/api/business";
import {getToken} from "../../utils/auth";
import {insertOrUpdateUser, resetPwd} from "../../http/api/user";

export default {
  name: "BusinessPage",
  components:{
    myUpload
  },
  data:()=>({
    businessId:null,
    uploadShow:false,
    headers: {
      smail: '*_~',
      Token:getToken()
    },
    isAdd:true,
    business:{},
    user:{},
    isBusiness:true,
  }),
  created() {
    this.init()
  },
  methods:{
    init(){
      this.businessId = this.$route.query.businessId;
      if (this.businessId){
        this.isAdd = false
        this.getBusiness();
      }
    },
    getBusiness(){
      selectBusinessByIdIncludeUser(this.businessId).then(res=>{
        this.business = res.data
        if (res.data.user){
          this.user = res.data.user
        }else {
          this.user = {}
        }
      })
    },
    toggleShow(isBusiness) {
      this.isBusiness = isBusiness
      this.uploadShow = !this.uploadShow;
    },
    /**
     * crop success
     *
     * [param] imgDataUrl
     * [param] field
     */
    cropSuccess(imgDataUrl, field){
      this.imgDataUrl = imgDataUrl;
    },
    /**
     * 上传成功
     *
     * [param] jsonData   服务器返回数据，已进行json转码
     * [param] field
     */
    cropUploadSuccess(jsonData,){
      if (this.isBusiness){
        this.business.image = jsonData.url
      } else {
        this.user.avatar = jsonData.url
      }
      this.$breadstick.notify("😀请点击右下角按钮,保存头像")
      this.uploadShow = !this.uploadShow;
    },
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    cropUploadFail(status, field){
      console.log('-------- upload fail --------');
      console.log(status);
      console.log('field: ' + field);
    },
    handleSaveBusiness(){
      if (!this.business.image){
        this.$breadstick.notify("请上传头像");
        return;
      }
      if (!this.business.name || this.business.name.trim()===''){
        this.$breadstick.notify("请输入店铺名称");
        return;
      }
      this.business.name = this.business.name.trim()
      insertOrUpdateBusiness(this.business).then(res=>{
        let businessId = res.data.businessId;
        this.businessId = businessId;
        this.$breadstick.notify('✔'+res.data.msg)
        this.$router.push({
          path:'/business/businessPage',
          query:{
            businessId
          }
        })
      })
    },
    handleSaveUser(){
      if (!this.business.id){
        this.$breadstick.notify("请先保存店铺信息.")
      }
      if (!this.user.avatar){
        this.$breadstick.notify("请上传头像");
        return;
      }
      if (!this.user.name || this.user.name.trim()===''){
        this.$breadstick.notify("请输入名称");
        return;
      }
      this.user.phone = this.user.phone.trim()
      if (!this.user.phone || this.user.phone.trim()===''){
        this.$breadstick.notify("请输入手机号");
        return;
      }
      this.user.phone = this.user.phone.trim()
      this.user.businessId = this.business.id;
      insertOrUpdateUser(this.user).then(res=>{
        this.$breadstick.notify('✔'+res.data)
        this.getBusiness()
      })
    },
    handleResetPwd(){
      if (!this.user.id){
        return;
      }
      resetPwd(this.user.id).then(res=>{
        this.$breadstick.notify(res.data)
      })
    }
  }
}
</script>

<style scoped>

</style>